<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./leaflet/leaflet.css" />
    <script src="./leaflet/leaflet.js"></script>
    <script src="./leaflet.ChineseTmsProviders.js"></script>
    <script src="./js/leaflet-ant-path.js"></script>
  </head>
  <body>
    <div id="map" style="height: 800px; width: 800px"></div>
    <div>
      <button onclick="addLine()">划线</button>
      <button onclick="endPoint()">结束</button>
    </div>
    <script>
      /**
       * 智图地图内容
       */
      var normalm1 = L.tileLayer.chinaProvider('Geoq.Normal.Map', {
        maxZoom: 18,
        minZoom: 5,
      })
      var normalm2 = L.tileLayer.chinaProvider('Geoq.Normal.Color', {
        maxZoom: 18,
        minZoom: 5,
      })
      var normalm3 = L.tileLayer.chinaProvider('Geoq.Normal.PurplishBlue', {
        maxZoom: 18,
        minZoom: 5,
      })
      var normalm4 = L.tileLayer.chinaProvider('Geoq.Normal.Gray', {
        maxZoom: 18,
        minZoom: 5,
      })
      var normalm5 = L.tileLayer.chinaProvider('Geoq.Normal.Warm', {
        maxZoom: 18,
        minZoom: 5,
      })
      var normalm6 = L.tileLayer.chinaProvider('Geoq.Normal.Cold', {
        maxZoom: 18,
        minZoom: 5,
      })
      /**
       * 天地图内容
       */
      var normalm = L.tileLayer.chinaProvider('TianDiTu.Normal.Map', {
          maxZoom: 18,
          minZoom: 5,
        }),
        normala = L.tileLayer.chinaProvider('TianDiTu.Normal.Annotion', {
          maxZoom: 18,
          minZoom: 5,
        }),
        imgm = L.tileLayer.chinaProvider('TianDiTu.Satellite.Map', {
          maxZoom: 18,
          minZoom: 5,
        }),
        imga = L.tileLayer.chinaProvider('TianDiTu.Satellite.Annotion', {
          maxZoom: 18,
          minZoom: 5,
        })

      var normal = L.layerGroup([normalm, normala]),
        image = L.layerGroup([imgm, imga])
      /**
       * 谷歌
       */
      var normalMap = L.tileLayer.chinaProvider('Google.Normal.Map', {
          maxZoom: 18,
          minZoom: 5,
        }),
        satelliteMap = L.tileLayer.chinaProvider('Google.Satellite.Map', {
          maxZoom: 18,
          minZoom: 5,
        })
      /**
       * 高德地图
       */
      var Gaode = L.tileLayer.chinaProvider('GaoDe.Normal.Map', {
        maxZoom: 18,
        minZoom: 5,
      })
      var Gaodimgem = L.tileLayer.chinaProvider('GaoDe.Satellite.Map', {
        maxZoom: 18,
        minZoom: 5,
      })
      var Gaodimga = L.tileLayer.chinaProvider('GaoDe.Satellite.Annotion', {
        maxZoom: 18,
        minZoom: 5,
      })
      var Gaodimage = L.layerGroup([Gaodimgem, Gaodimga])

      var baseLayers = {
        智图地图: normalm1,
        智图多彩: normalm2,
        智图午夜蓝: normalm3,
        智图灰色: normalm4,
        智图暖色: normalm5,
        智图冷色: normalm6,
        天地图: normal,
        天地图影像: image,
        谷歌地图: normalMap,
        谷歌影像: satelliteMap,
        高德地图: Gaode,
        高德影像: Gaodimage,
      }

      var latlng = L.latLng(30.48862182508258, 114.47839736938478)
      // 记载自定义切片文件
      var map = L.map('map', {
        center: latlng,
        zoom: 13,
        layers: [Gaode],
      })
      let arr = []
      map.on('click', function (data) {
        arr.push([data.latlng.lat, data.latlng.lng])
      })
      function endPoint() {
        console.log(arr)
      }
      let gPath = null
      let addLine = function () {
        if (gPath) {
          map.removeLayer(gPath)
        }
        const latlngArr = [
          [30.488344463911687, 114.5202398300171],
          [30.487697284772047, 114.52030420303346],
          [30.486791226745986, 114.52032566070558],
          [30.486125546086082, 114.52036857604982],
          [30.48514550793957, 114.52028274536134],
          [30.484997576796086, 114.52004671096803],
          [30.484923611140033, 114.51985359191896],
          [30.484886628290912, 114.51914548873903],
          [30.484905119717215, 114.5184373855591],
          [30.484905119717215, 114.51753616333009],
          [30.484905119717215, 114.51648473739625],
          [30.484886628290912, 114.51532602310182],
          [30.484905119717215, 114.51448917388917],
          [30.484886628290912, 114.51358795166017],
          [30.484905119717215, 114.51311588287354],
          [30.485385895568204, 114.51315879821779],
          [30.485903651520946, 114.51311588287354],
        ]
        var antPath = L.polyline.antPath
        gPath = antPath(latlngArr, {
          paused: false, //暂停  初始化状态
          reverse: false, //方向反转
          delay: 3000, //延迟，数值越大效果越缓慢
          dashArray: [10, 20], //间隔样式
          weight: 8, //线宽
          opacity: 0.5, //透明度
          //"color": "#0000FF",　//颜色
          //"pulseColor": "#FFFFFF"　　//块颜色
        })
        gPath.addTo(map)

        // 缩放地图到折线所在区域
        map.fitBounds(gPath.getBounds())
      }
    </script>
  </body>
</html>
